{% extends 'base.html' %}

{% block title %}
    课程详情
{% endblock %}

{% load staticfiles %}

{% block custom_bread_tail %}
    <li><a href="{% url 'course:course_list' %}">公开课程</a>></li>
    <li>课程详情</li>
{% endblock %}

{% block content %}
    <section>
        <div class="wp">
            <div class="groupPurchase_detail detail">
                <div class="toppro">
                    <div class="left">
                        <div class="picbox">
                            <div class="tb-booth tb-pic">
                                <img width="440" height="445"
                                     src="{{ MEDIA_URL }}{{ course.image }}"
                                     class="jqzoom"/>
                            </div>

                        </div>
                        <div class="des">
                            <h1 title="{{ course.name }}">{{ course.name }}</h1>
                            <span class="key">{{ course.desc }}</span>
                            <div class="prize">
                                <span class="fl">难度：<i class="key">{{ course.get_degree_display }}</i></span>
                                <span class="fr">学习人数：{{ course.students }}</span>
                            </div>
                            <ul class="parameter">
                                <li><span
                                        class="pram word3">时&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;长：</span><span>{{ course.learn_times }}</span>
                                </li>
                                <li><span
                                        class="pram word3">章&nbsp;节&nbsp;数：</span><span>{{ course.lesson_nums }}</span>
                                </li>
                                <li><span class="pram word3">课程类别：</span><span title="">{{ course.category }}</span>
                                </li>
                                <li class="piclist"><span class="pram word4">学习用户：</span>
                                    {% for user_course in course.learning_user_courses %}
                                        <span class="pic"><img width="40" height="40"
                                                               src="{{ MEDIA_URL }}{{ user_course.user.image }}"/></span>
                                    {% endfor %}

                                </li>
                            </ul>
                            <div class="btns">
                                <div class="btn colectgroupbtn" id="jsLeftBtn">
                                    {% if course_has_fav %}已{% endif %}收藏
                                </div>
                                <div class="buy btn">
                                    <a style="color: white" href="{% url 'course:info' course.id %}">开始学习</a>
                                </div>
                            </div>
                        </div>
                        <div class="group-share-box">
                            <div class="bdsharebuttonbox"
                                 data-text="django开始了"
                                 data-desc="我在#Lighten#发现了"
                                 data-comment=""
                                 data-url="/group/groupdetail/15/">
                                <span class="fl">分享到：</span>
                                <a href="#" class="bds_more" data-cmd="more"></a>
                                <a title="分享到QQ空间" href="#" class="bds_qzone" data-cmd="qzone"></a>
                                <a title="分享到新浪微博" href="#" class="bds_tsina" data-cmd="tsina"></a>
                                <a title="分享到腾讯微博" href="#" class="bds_tqq" data-cmd="tqq"></a>
                                <a title="分享到人人网" href="#" class="bds_renren" data-cmd="renren"></a>
                                <a title="分享到微信" href="#" class="bds_weixin" data-cmd="weixin"></a>
                            </div>
                        </div>
                    </div>
                    <div class="right">
                        <div class="head">
                            <h1>授课机构</h1>
                            <p>填充数据世界名校，课程权威</p>
                        </div>
                        <div class="pic">
                            <a href="{% url 'org:org_home' course.course_org.id %}">
                                <img width="150" height="80" src="{{ MEDIA_URL }}{{ course.course_org.image }}"/>
                            </a>
                        </div>
                        <a href="{% url 'org:org_home' course.course_org.id %}">
                            <h2 class="center" title="{{ course.course_org.name }}">{{ course.course_org.name }}</h2>
                        </a>
                        <div class="btn notlogin
					     " data-favid="14" id="jsRightBtn">
                            {% if org_has_fav %}已{% endif %}收藏
                        </div>
                        <div class="clear">
                            <ul>
                                <li>
                                    <span>课 &nbsp;程&nbsp; 数：&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; {{ course.course_org.course_nums }}</span>
                                </li>
                                <li>
                                    <span>教 &nbsp;师&nbsp; 数：&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; {{ course.course_org.teacher_nums }}</span>
                                </li>
                                <li>所在地区：&nbsp;&nbsp;{{ course.course_org.city }}</li>
                                <li>认&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;证&nbsp;:
                                    &nbsp;&nbsp;
                                    <img title="金牌机构" src="{% static 'images/gold.png' %}"/>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <section>
        <div class="wp">
            <div class="list groupPurchase_detail_pro">
                <div class="left layout">
                    <div class="head">
                        <ul class="tab_header">
                            <li class="active">课程详情</li>
                        </ul>
                    </div>
                    <div class="tab_cont tab_cont1">
                        {% autoescape off %}
                        {{ course.detail }}
                        {% endautoescape %}
                    </div>

                    <div class="tab_cont tab_cont2">
                        <div class="comment">
                            <div class="comenlist">

                            </div>
                        </div>
                    </div>
                </div>
                <div class="right layout">
                    <div class="head">相关课程推荐</div>
                    <div class="group_recommend">
                        {% for course in relate_courses %}
                            <dl>
                                <dt>
                                    <a href="{% url 'course:detail' course.id %}">
                                        <img width="240" height="220" class="scrollLoading"
                                             src="{{ MEDIA_URL }}{{ course.image }}"/>
                                    </a>
                                </dt>
                                <dd>
                                    <a href="{% url 'course:detail' course.id %}"><h2> {{ course.name }}</h2></a>
                                    <span class="fl">学习时长：<i class="key">{{ course.learn_times }}</i></span>
                                </dd>
                            </dl>
                        {% endfor %}
                    </div>
                </div>
            </div>
        </div>
    </section>
{% endblock %}

{% block custom_js %}
    <script type="text/javascript">
        //收藏分享
        function add_fav(current_elem, fav_id, fav_type) {
            $.ajax({
                cache: false,
                type: "POST",
                url: "/org/add_fav/",
                data: {'fav_id': fav_id, 'fav_type': fav_type},
                async: true,
                beforeSend: function (xhr, settings) {
                    xhr.setRequestHeader("X-CSRFToken", "{{ csrf_token }}");
                },
                success: function (data) {
                    if (data.status == 'fail') {
                        if (data.msg == '用户未登录') {
                            window.location.href = "/login/";
                        } else {
                            current_elem.text(data.msg)
                        }

                    } else if (data.status == 'success') {
                        current_elem.text(data.msg)
                    }
                }
            });
        }

        $('#jsLeftBtn').on('click', function () {
            {# fav_type: 1为课程收藏，2为机构收藏 #}
            add_fav($(this), {{ course.id }}, 1);
        });

        $('#jsRightBtn').on('click', function () {
            {# fav_type: 1为课程收藏，2为机构收藏 #}
            add_fav($(this), {{ course.course_org.id }}, 2);
        });
    </script>
{% endblock %}